<!-- 分类 -->
<template>
  <view class="wh-full">
    <view class="category dflex-s h-full">
      <!-- 左侧一级分类 -->
      <view class="h-full left" style="height: calc(100vh - 188rpx)">
        <scroll-view class="h-full" scroll-y>
          <view
            v-for="item in firstDatas"
            :key="item.id"
            class="item dflex-c"
            :class="{ active: item.id === cid }"
            @click="onSelect(item)"
          >
            {{ item.name }}
          </view>
        </scroll-view>
      </view>
      <!-- 右侧子分类 -->
      <scroll-view class="h-full right bg-main" scroll-y style="height: calc(100vh - 100px)">
        <!-- 空白页 -->
        <view v-if="empty"> 空白页 </view>
        <view v-else>
          <!-- top轮播图 -->
          <view v-if="!isEmpty(swiperDatas)">
            <aster-swiper
              ref="asterSwiperRef"
              :swiperDatas="swiperDatas"
              :swiperHeight="swiperHeight"
            />
          </view>
          <!-- 二级分类 -->
          <view v-for="item in secondDatas" :key="item.id">
            <uni-section title="">
              <template #decoration>
                <text class="fwb">{{ item.name }}</text>
              </template>
              <uni-grid :column="3" :highlight="true" :showBorder="false">
                <view v-for="(tab, index) in item.children" :key="index">
                  <uni-grid-item :index="index">
                    <view
                      class="item dflex dflex-flow-c margin-bottom-sm"
                      @click.stop="toGoodsList(tab)"
                    >
                      <image class="margin-bottom-xs" :lazy-load="true" :src="tab.icon" />
                      <text class="tac clamp">{{ tab.name }}</text>
                    </view>
                  </uni-grid-item>
                </view>
              </uni-grid>
            </uni-section>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import AsterSwiper from '@/components/common/aster-swiper.vue';
  import { getCategoryList, getCategoryDetail } from '@/services/api/tabbar/category';
  import { CategoryModel, CategoryInfoModel } from '@/services/model/categoryModel';
  import { ImageModel } from '@/services/model/homeModel';
  import { isEmpty } from '@/utils/is';
  import { ref, watchEffect, getCurrentInstance } from 'vue';
  import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
  import config from '@/utils/config';
  import { url_params } from '@/utils';
  import { router } from '@/utils/router';

  // 获取组件实例
  const instance = getCurrentInstance();

  const asterSwiperRef = ref();
  /** 一级分类 */
  const firstDatas = ref<Array<CategoryModel>>();
  /** 二级分类 */
  const secondDatas = ref<Array<CategoryModel>>();
  /** 轮播数据 */
  const swiperDatas = ref<Array<ImageModel>>();
  /** 轮播高度 */
  const swiperHeight = ref<string>('180rpx');
  /** 当前分类 */
  const cid = ref<number | undefined>(0);
  /** 是否空白页 */
  const empty = ref<boolean>(false);

  // 监听数据
  watchEffect(() => {
    if (isEmpty(secondDatas.value)) {
      empty.value = true;
    } else {
      empty.value = false;
    }
  });

  onLoad((options: any) => {
    loadData(() => {});
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    loadData(() => {
      uni.stopPullDownRefresh();
    });
  });

  /** 选中左侧分类 */
  const onSelect = (item: CategoryModel) => {
    cid.value = item.id;
    // 加载右侧分类
    getCategoryDetail(item.id).then(({ data }) => {
      swiperDatas.value = data.data.bannerList;
      secondDatas.value = data.data.children;
    });
  };

  /** 加载数据 */
  const loadData = async (callback: any) => {
    getCategoryList().then(({ data }) => {
      // 一级分类
      firstDatas.value = data.data;
      if (!isEmpty(firstDatas.value)) {
        let c: CategoryModel = firstDatas.value[0];
        cid.value = c.id;
        getCategoryDetail(c.id).then(({ data }) => {
          swiperDatas.value = data.data.bannerList;
          secondDatas.value = data.data.children;
        });
      }
      if (typeof callback === 'function') {
        // 数据加载完成回调函数
        callback();
      }
    });
  };

  /** 跳转搜索页 */
  const toGoodsList = (tab: CategoryInfoModel) => {
    router.push(
      config.route.goodslist +
        url_params({
          keywords: tab.name,
        }),
    );
  };
</script>

<style lang="scss">
  page {
    height: 100%;
  }

  .category {
    overflow: hidden;
    background-color: #fff;
    /* 隐藏滚动条样式 */
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .left {
      width: 200rpx;
      background-color: rgb(241, 242, 244, 0.6);

      .item {
        height: 100rpx;
        color: #777777;
        position: relative;

        &.active {
          background-color: #fff;
          font-size: 16px;
          font-weight: 700;
          border-radius: 10px 0 0 10px;

          &:before {
            content: '';
            display: inline-block;
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            background: linear-gradient(270deg, rgba(184, 0, 225, 0) 0, #8700ff 100%);
            opacity: 0.6;
            position: absolute;
            left: 20rpx;
            top: 8rpx;
          }
        }
      }
    }

    .right {
      flex: 1;
      overflow: hidden;
      display: block;

      .item {
        display: flex;
        flex-direction: column;
        color: #666;

        image {
          width: 130rpx;
          height: 130rpx;
          background-color: #f8f8f8;
        }
      }
    }
  }
</style>
